<template>
  <!-- 头部信息 -->
  <div class="personal-container">
    <van-nav-bar title="个人信息" fixed @click-left="goBack" left-arrow> </van-nav-bar>

    <!-- 信息卡片 -->
    <van-card class="info-card">
      <template #tags>
        <div class="info-item">
          <span class="label">用户名：</span>
          <span class="value">{{ userInfo.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ userInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">邮箱：</span>
          <span class="value">{{ userInfo.email }}</span>
        </div>
        <div class="info-item">
          <span class="label">角色：</span>
          <span class="value">{{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}</span>
        </div>
      </template>
    </van-card>

    <!-- 退出登录按钮 -->
    <van-button type="danger" block round class="logout-btn" @click="handleLogout">
      退出登录
    </van-button>
  </div>
</template>

<script setup lang="ts">
import { useUser } from '@/components/composables/usePersonalInfo'
const { userInfo, handleLogout, goBack } = useUser()
</script>
<style scoped>
.personal-container {
  padding: 24px 16px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.header-icon {
  font-size: 36px;
  color: #1989fa;
  margin-right: 16px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.info-card {
  margin-bottom: 24px;
  padding: 24px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebedf0;
}

.label {
  width: 80px;
  font-size: 14px;
  color: #666;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.logout-btn {
  margin-top: 32px;
  padding: 14px;
  font-size: 16px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .header-title {
    font-size: 18px;
  }

  .info-card {
    padding: 16px;
  }

  .label {
    width: 60px;
  }
}
</style>
